<template>
  <div class="right-event-interaction-data margin-top-16">
    <switch-normal v-model="interactionData.isDimension" label="多维数组" @change="onChangeInteractionData"></switch-normal>
    <el-collapse v-if="interactionData.isDimension" v-model="activeNames">
      <el-button type="primary"  @click.stop="onAddInteractionItem" class="margin-bottom-10 margin-left-right-16"><el-icon><i class="jy-icon-plus"></i></el-icon>增加项</el-button>
      <el-collapse-item v-for="(items, index) in interactionData.dimensionLists" :key="index" :name="index+1" class="list-group-item">
        <template #title>
          第{{DIGIT_MAP[index]}}项<i class="jy-icon-delete el-collapse-item__arrow" @click.stop="onDeleteInteractionItem({index})"></i>
        </template>
          <el-button type="primary"  @click.stop="onAddInteractionItem(index)" class="margin-10 margin-left-right-16 padding-8"><el-icon><i class="jy-icon-plus"></i></el-icon>增加项</el-button>
          <el-collapse v-model="activeNames_" class="margin-left-right-16">
            <el-collapse-item v-for="(option, qIndex) in items"  :name="qIndex+1" :key="qIndex">
              <template #title>
                第{{(qIndex+1)}}项<i class="jy-icon-delete el-collapse-item__arrow" @click.stop="onDeleteInteractionItem({index, qIndex})"></i>
              </template>
              <add-img-con :url="option.url" :isInteractionData="true" comAttr="dimensionLists" picAttr="url" :index="index" :qIndex="qIndex" :height="100" :isCrop='false' class="margin-left-right-16"></add-img-con>
              <input-normal label="图片地址" v-model="option.url" @change="onChangeInteractionData"></input-normal>
              <add-img-con :url="option.selectedUrl" :isInteractionData="true" comAttr="dimensionLists" picAttr="selectedUrl" :index="index" :qIndex="qIndex" :height="100" :isCrop='false' class="margin-left-right-16"></add-img-con>
              <input-normal label="选中图片地址" v-model="option.selectedUrl" @change="onChangeInteractionData"></input-normal>
              <textarea-normal label="文本" v-model="option.text" @change="onChangeInteractionData"></textarea-normal>
              <textarea-normal label="自定义数据" v-model="option.params" placeholder='{"text":""}' @change="onChangeInteractionData"></textarea-normal>
            </el-collapse-item>
          </el-collapse>
      </el-collapse-item>
    </el-collapse>
    
    <el-collapse v-else v-model="activeNames">
      <el-button type="primary"  @click.stop="onAddInteractionItem" class="margin-bottom-10 margin-left-right-16"><el-icon><i class="jy-icon-plus"></i></el-icon>增加项</el-button>
      <el-collapse-item v-for="(item, index) in interactionData.lists" :key="index" :name="index+1" class="list-group-item">
        <template #title>
          第{{DIGIT_MAP[index]}}项<i class="jy-icon-delete el-collapse-item__arrow" @click.stop="onDeleteInteractionItem({index})"></i>
        </template>
        <add-img-con :url="item.url" :isInteractionData="true" comAttr="lists" picAttr="url" :index="index" :height="100" :isCrop='false' class="margin-left-right-16"></add-img-con>
        <input-normal label="图片地址" v-model="item.url" @change="onChangeInteractionData"></input-normal>
        <add-img-con :url="item.selectedUrl" :isInteractionData="true" comAttr="lists" picAttr="selectedUrl" :index="index" :qIndex="qIndex" :height="100" :isCrop='false' class="margin-left-right-16"></add-img-con>
        <input-normal label="选中图片地址" v-model="item.selectedUrl" @change="onChangeInteractionData"></input-normal>
        <textarea-normal label="文本" v-model="item.text" @change="onChangeInteractionData"></textarea-normal>
        <textarea-normal label="自定义数据" v-model="item.params" placeholder='{"text":""}' @change="onChangeInteractionData"></textarea-normal>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
  import { INTERACTION_DATA } from "@/common/events"
  import { mapState } from 'vuex'
  import { DIGIT_MAP } from '@/common/const'
  import AddImgCon from '@/views/components/add-img-con.vue'
  import SwitchNormal from '@/views/components/edit/SwitchNormal.vue'
  import InputNormal from '@/views/components/edit/InputNormal.vue'
  import TextareaNormal from '@/views/components/edit/TextareaNormal.vue'

  export default {
    setup () {
      return {
        DIGIT_MAP: DIGIT_MAP,
        activeNames: [1],
        activeNames_: [1],
      }
    },
    components: {
      AddImgCon,
      SwitchNormal,
      InputNormal,
      TextareaNormal,
    },
    computed: {
      ...mapState({
        interactionData: (state) => _.cloneDeep(state.components.currentComponentData.interactionData),
      }),
    },
    methods: {
      onChangeInteractionData(){
        this.$store.commit("components/updateInteractionData", { interactionData: this.interactionData });
      },
      onAddInteractionItem(index){
        let interactionData = this.interactionData;
        let item = null;
        if(interactionData.isDimension){
          if(index >= 0){
            item = _.cloneDeep(INTERACTION_DATA.lists[0]);
          }else{
            item = [_.cloneDeep(INTERACTION_DATA.lists[0])];
          }
        }else{
          item = _.cloneDeep(INTERACTION_DATA.lists[0]);
        }
        this.$store.commit("components/addInteractionItem", { index, item });
      },
      onDeleteInteractionItem({ index, qIndex }){
        this.$store.commit("components/deleteInteractionItem", { index, qIndex });
      },
    }
  }
</script>